<template>
  <div style="height: 93% ;width: 100%">
    <vxe-grid ref="xTable" v-bind="gridOptions" :export-config="{}" transfer></vxe-grid>
    <div class="Bottom">
      <vxe-button status="primary" @click="submitEvent">保存</vxe-button>
      <vxe-button @click="closeEvent">关闭</vxe-button>
    </div>
  </div>

</template>

<script>
import { getAssignedMenuList, permissionList, updataRoleAssignedMenu } from '@/api/system'
import axios from 'axios'

export default {
  name: 'AssignResourcesForm',
  components: {},
  props: {
    isModal: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      roleId: null,
      gridOptions: {
        height: 500,
        resizable: true,
        showOverflow: 'tooltip',
        highlightHoverRow: true,
        keepSource: true,
        loading: false,
        size: 'mini',
        // 树形表配置
        treeConfig: {
          transform: true,
          expandAll: true,
          rowField: 'id',
          parentField: 'parentId'
        },
        checkboxConfig: {
          labelField: 'id', checkField: 'isCheck', checkStrictly: true
        },
        // 数据代理
        proxyConfig: {
          ajax: {
            query: () => {
              // 模拟后台接口
              // this.getMenuListById()
              // this.getPermissionList()
              // const a = this.getAll()
              const parameter = { 'id': this.roleId }
              return new Promise(resolve => {
                axios.all([getAssignedMenuList(parameter), permissionList()])
                  .then(axios.spread((getAssignedMenuList, permissionList) => {
                    console.log('getAssignedMenuList', getAssignedMenuList)
                    console.log('permissionList', permissionList)
                    const { data: AssignedMenuListData, code: AssignedMenuListCode } = getAssignedMenuList.data
                    const { data: permissionListData, code: permissionListCode } = permissionList.data
                    if (AssignedMenuListCode === 200) {
                      if (permissionListCode === 200) {
                        for (var datum of permissionListData.records) {
                          datum.isCheck = AssignedMenuListData.includes(datum.id)
                        }
                        resolve(permissionListData.records)
                      }
                    }
                  }))
              })
            }
          }
        },
        // 列配置
        columns: [
          { type: 'checkbox', title: 'ID', width: 90 },
          // { field: 'id', title: 'ID', width: 45 },
          { field: 'name', title: '资源名称', treeNode: true, width: 190 },
          { field: 'code', title: '权限编码', width: 120 },
          // { field: 'type', title: '资源类型', formatter: formatterType, width: 100 },
          { field: 'type_text', title: '资源类型', width: 100 },
          { field: 'path', title: '菜单路径', width: 100 },
          { field: 'orderNum', title: '排序', sortable: true, width: 70 }
        ]
      },
      typeList: [
        {
          label: '目录',
          value: 0
        },
        {
          label: '菜单',
          value: 1
        },
        {
          label: '按钮/API',
          value: 2
        }
      ]
    }
  },
  mounted () {

  },
  methods: {
    submitEvent (evnt) {
      const { data } = this.$refs.xTable.getProxyInfo()
      const parameter = []
      for (const datum of data) {
        if (datum.isCheck === true) {
          parameter.push({ 'roleId': this.roleId, 'permissionId': datum.id })
        }
      }
      console.log(parameter)
      updataRoleAssignedMenu(parameter).then((res) => {
        console.log(res)
        const { code } = res.data
        if (code === 200) {
          this.$XModal.message({ content: '编辑成功', status: 'success' })
          this.$emit('closeModal')
        } else if (code >= 400) {
          throw res.data
        }
      }).catch((error) => {
        // console.log(error)
        const message = error.response ? error.response.data.message : error.message
        this.$XModal.message({ content: message, status: 'error' })
      })
    },
    closeEvent (evnt) {
      this.$emit('closeModal')
    }
  }
}
</script>

<style lang='less'>
.Bottom {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

</style>
